<template>
	<view>
		<!-- 商品列表 -->
		<view class="goods-item" @click="clickHandler">
			<!-- 选中框 -->
			<view class="radio-box" v-if="showRadio">
				<radio color="#ea4350" :checked="goods.goods_state" @click="radioClick"></radio>
			</view>
			<!-- 左边 -->
			<view class="left">
				<image :src="goods.goods_small_logo || defaultImgSrc"></image>
			</view>
			<!-- 右边 -->
			<view class="right">
				<!-- 上 -->
				<view class="title">{{goods.goods_name}}</view>
				<!-- 下 -->
				<view class="botton">
					<view class="price">¥ {{goods.goods_price | priceFormat }}</view>
					<block v-if="showNum">
						<uni-number-box :value="goods.goods_count" min="1" @change="changeHandler"></uni-number-box>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-goods",
		data() {
			return {
				// 默认图
				defaultImgSrc: '/static/images/empty.png'
			};
		},
		props: {
			showNum: {
				type: Boolean,
				default: false
			},
			showRadio: {
				type: Boolean,
				default: false
			},
			goods: {
				type: Object,
				default: () => {}
			}
		},
		// 过滤器
		filters: {
			priceFormat(val) {
				return val.toFixed(2)
			}
		},
		methods: {
			changeHandler(val) {
				// console.log(val);
				this.$emit('num-change', {
					goods_count: val,
					goods_id: this.goods.goods_id
				})
			},
			radioClick() {
				this.$emit('radio-click', this.goods)
			},
			clickHandler() {
				this.$emit('click', this.goods)
			}
		}
	}
</script>

<style lang="scss">
	.goods-item {
		.radio-box {
			display: flex;
			align-items: center;
		}

		display: flex;
		border-bottom: 1px solid #eee;
		padding: 6px;

		.left {
			margin-right: 6px;

			image {
				width: 100px;
				height: 100px;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 12px;
			}

			.price {
				color: #ea4350;
			}

			.botton {
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>
